<template>
  <div class="password">
    <div class="container">
      <div class="title">
        <h3>{{title}}</h3>
      </div>
      <div class="content">
<!--  输入手机号/账号盒子      -->
        <div class="inputBox" v-show="!hideInput">
          <span class="name">手机号/账号：</span>
          <el-input
            @focus="accountFalse=false"
            @blur="accountVerify"
            v-model="account"
            placeholder="请输入找回手机号/账号">
          </el-input>
          <p class="verify"><span v-show="accountFalse" v-text="accountRule"></span></p>
          <a><span @click="$router.push('/forget/account')">不记得账号?</span></a>
          <el-button @click="confirmFind">确定</el-button>
        </div>
<!--  绑定手机号，获取验证码盒子      -->
        <div class="phoneTrueBox" v-if="isPhone==='true'?true:''">
          <p><i class="name">手机号：</i><span>{{mobileNumHide}}</span></p>
          <p>
            <i class="name">验证码：</i>
            <el-input
              @focus="smsCodeFalse=false"
              @blur="smsCodeVerify"
              v-model="smsCode"
              placeholder="请输入验证码">
            </el-input>
            <el-button @click="getSmsCode">{{getSmsCodeText}}</el-button>
          </p>
          <p class="smsCodeVerify"><span v-show="smsCodeFalse" v-text="smsCodeRule"></span></p>
          <div class="btn">
            <el-button @click="confirmSmsCode">确定</el-button>
          </div>
          <a><span>手机号不可用？联系客服</span></a>
        </div>
<!--  未绑定手机号，联系客服盒子      -->
        <div class="phoneFalseBox" v-if="isPhone==='false'?true:''">
          <p>
            <i class="name">账号：</i>
            <span>{{account}}</span>
          </p>
          <p><span class="toRelate">您的账号尚未绑定手机号，请联系客服找回密码</span></p>
          <div class="btn">
            <el-button>联系客服</el-button>
          </div>
        </div>
<!--  验证验证码通过，重置密码盒子      -->
        <div class="resetPwdBox" v-if="isResetPwd">
          <div class="newPwd">
            <i class="name">请输入新的密码：</i>
            <el-input
              placeholder="请输入新密码"
              v-model="newPwd"
              show-password
              @focus="newPwdFalse=false"
              @blur="newPwdVerify">
            </el-input>
            <p class="newPwdVerify"><span v-show="newPwdFalse" v-text="newPwdRule"></span></p>
          </div>
          <div class="newPwdReset">
            <i class="name">再次输入新密码：</i>
            <el-input
              placeholder="请再次输入新密码"
              v-model="newPwdReset"
              show-password
              @focus="newPwdResetFalse=false"
              @blur="newPwdResetVerify">
            </el-input>
            <p class="newPwdVerify"><span v-show="newPwdResetFalse" v-text="newPwdResetRule"></span></p>
          </div>
          <div class="btn">
            <el-button @click="confirmNewPwd">确认</el-button>
          </div>
        </div>
      </div>
    </div>
    <aside>
      <el-dialog
        :visible.sync="captchaDialog"
        :close-on-click-modal="false"
        append-to-body
        :center="true"
        :show-close="false"
        z-index="500"
        width="360px"
      >
        <Captcha
          v-model="captchaDialog"
          width="300px"
          height="240px"
          :max-dot="maxDot"
          :image-base64="imageBase64"
          :thumb-base64="thumbBase64"
          :error-prompt="errorPrompt"
          @close="handleCloseEvent"
          @refresh="handleRefreshEvent"
          @confirm="handleConfirmEvent"
        ></Captcha>
      </el-dialog>
    </aside>
  </div>
</template>

<script>
    import Captcha from '../../register/captcha/captcha.vue'  // 点选验证码
    import { getCaptcha, checkCaptcha } from '../../../../api/captcha.js'
    import { checkAccount, checkPhone, getPwdSmsCode, smsCodePwdExist, resetPwd } from '../../../../api/getBack.js'
    export default {
        name: "password",
        data() {
            return {
                title: '找回密码',
                accountFalse: false,
                accountRule: '',
                // 账号
                account: '',
                // 点选验证组件
                captchaDialog: false,
                maxDot: 5,
                imageBase64: '',
                thumbBase64: '',
                captchaKey: '',  // 成功获取点选验证码返回的key
                errorPrompt: '',   // 点选验证返回的错误信息
                captchaToken: '',  // 点选验证返回的token
                smsCodeFalse: false,
                smsCode: null,
                getSmsCodeText: '获取验证码120s',
                smsCodeRule: '请输入验证码',
                isPhone: '',
                hideInput: false,
                mobileNum: '',
                mobileNumHide: '',
                userId: '',
                // 重置密码
                newPwd: '',
                newPwdFalse: false,
                newPwdRule: '',
                newPwdReset: '',
                newPwdResetFalse: false,
                newPwdResetRule: '',
                isResetPwd: false,
            }
        },
        created() {

        },
        components: {
            Captcha
        },
        methods: {
            // 校验账号/手机号是否符合规则
            accountVerify() {
                if(this.account) {
                    this.accountFalse = false;
                }else{
                    this.accountRule = '手机号/账号不可为空';
                    this.accountFalse = true;
                }
            },
            // 关闭(点选验证码)
            handleCloseEvent() {
                this.captchaDialog = false;
                this.errorPrompt = '';
            },
            // 刷新(点选验证码)
            async handleRefreshEvent() {
                this.errorPrompt = '';
                const res = await getCaptcha();
                if(res.status===200) {
                    this.captchaKey = res.data.captcha_key;
                    this.imageBase64 = res.data.image_base64;
                    this.thumbBase64 = res.data.thumb_base64;
                    if(this.imageBase64 && this.thumbBase64) {
                        this.captchaDialog = true;
                    }
                }
            },
            // 确认(点选验证码)
            async handleConfirmEvent(dots) {
                this.errorPrompt = '';
                let dotArr = [];
                dots.forEach(dot => {
                    dotArr.push(dot.x, dot.y)
                });
                const res = await checkCaptcha({
                    "dots": dotArr.join(','),
                    "key": this.captchaKey,
                });
                if (res.data.code===200){
                    // 验证通过，执行下面接口
                    this.captchaToken = res.data.data.captchaToken;
                    this.captchaDialog = false;
                    // 校验账号是否存在
                    const isAccount = await checkAccount({
                        "mobileAccount": this.account,
                        "captchaToken": this.captchaToken
                    });
                    if(isAccount.data.status) {
                        this.captchaToken = isAccount.data.data.captchaToken;
                        // 如果账号存在，执行后面接口(校验是否绑定手机号)
                        const isPhone = await checkPhone({
                            "mobileAccount": this.account,
                            "captchaToken": this.captchaToken
                        });
                        if(isPhone.data.status) {
                            // isBand  检测是否绑定手机
                            if(isPhone.data.data.isBind) {
                                // 绑定了手机号，发送验证码
                                this.captchaToken = isPhone.data.data.checkToken;
                                this.mobileNum = isPhone.data.data.mobile;
                                this.userId = isPhone.data.data.userId;
                                this.mobileNumHide = this.mobileNum.slice(0,3)+'****'+this.mobileNum.slice(7);
                                this.hideInput = true;
                                this.isPhone = 'true';
                                this.getSmsCode()  // 获取验证码
                            }else{
                                // 未绑定手机号，联系客服找回
                                this.hideInput = true;
                                this.isPhone = 'false';
                            }
                        }
                    }else{
                        // 如果账号不存在，返回错误
                        this.accountRule = isAccount.data.msg;
                        this.accountFalse = true;
                    }
                }else{
                    //如果验证错误或未点选则弹出对话框或错误提示
                    this.errorPrompt = res.data.msg;
                    //并刷新下验证码让用户重新选择
                }
            },
            // 确认 (获取点选验证码)
            async confirmFind() {
                this.accountVerify();
                if(!this.accountFalse) {
                    const res = await getCaptcha();
                    if(res.status===200) {
                        this.captchaKey = res.data.captcha_key;
                        this.imageBase64 = res.data.image_base64;
                        this.thumbBase64 = res.data.thumb_base64;
                        if(this.imageBase64 && this.thumbBase64) {
                            this.captchaDialog = true;
                        }
                    }
                }
            },
            // 获取验证码
            async getSmsCode() {
                const res = await getPwdSmsCode({
                    'mobile': this.mobileNum,
                    'token': this.captchaToken
                });
                if(res.data.status) {
                    this.captchaToken = res.data.data.checkToken;
                    // 获取验证码，倒计时
                    let i = 120;
                    let timer = setInterval(() => {
                        this.getSmsCodeText = '获取验证码' + i + 's';
                        i--;
                        if (i < 0) {
                            clearInterval(timer);
                            this.getSmsCodeText = '获取验证码';
                        }
                    }, 1000);
                }
            },
            // 短信验证码规则校验
            smsCodeVerify() {
                if(this.smsCode) {
                    this.smsCodeFalse = false;
                }else{
                    this.smsCodeRule = '请输入验证码';
                    this.smsCodeFalse = true;
                }
            },
            // 确认 (校验输入的验证码)
            async confirmSmsCode() {
                this.smsCodeVerify();
                if(!this.smsCodeFalse) {
                    const res = await smsCodePwdExist({
                        "mobile": this.mobileNum,
                        "checkToken": this.captchaToken,
                        "smsCode": this.smsCode
                    });
                    console.log(res.data);
                    if(res.data.status) {
                        this.captchaToken = res.data.data.checkToken;
                        this.isPhone = '';
                        this.isResetPwd = true;
                    }
                }
            },
            // 校验新密码
            newPwdVerify() {
                if(this.newPwd) {
                    this.newPwdFalse = false;
                }else{
                    this.newPwdRule = '新密码不能为空';
                    this.newPwdFalse = true;
                }
            },
            // 校验新密码
            newPwdResetVerify() {
                if(this.newPwdReset) {
                    if(this.newPwd===this.newPwdReset) {
                        this.newPwdResetFalse = false;
                    }else{
                        this.newPwdResetRule = '前后密码不一致';
                        this.newPwdResetFalse = true;
                    }
                }else{
                    this.newPwdResetRule = '重复密码不能为空';
                    this.newPwdResetFalse = true;
                }
            },
            // 确认 (校验新密码)
            async confirmNewPwd() {
                this.newPwdVerify();
                this.newPwdResetVerify();
                let flag = this.newPwdFalse===false&&this.newPwdResetFalse===false;
                // 验证是否通过
                this.userId = this.userId.toString();
                if(flag) {
                    const res = await resetPwd({
                        "checkToken": this.captchaToken,
                        "newPassword": this.newPwd,
                        "checkPassword": this.newPwdReset,
                        "userId": this.userId,
                    });
                    console.log(res.data);
                    if(res.data.status) {
                        alert('跳转登陆页面或首页或提示');
                        this.$router.push('/login')
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../../styles/common.scss';
  .password{
    .container{
      padding: 10px 0 50px;
      .title{
        text-align: center;
        padding: 40px 0;
        h3{
          font-size: 1.5rem;
          font-weight: normal;
        }
      }
      .content{
        .inputBox{
          width: 50%;
          margin: auto;
          span.name{
            display: inline-block;
            width: 20%;
            text-align: center;
          }
          .el-input{
            display: inline-block;
            width: 78%;
          }
          p.verify{
            height: 18px;
            margin-left: 21%;
            span{
              color: #f00;
            }
          }
          a{
            display: block;
            text-align: right;
            color: #2e86ff;
            margin-top: 30px;
            padding-right: 4px;
            span{
              cursor: pointer;
            }
          }
          .el-button{
            margin: 4px auto 30px;
            display: block;
            width: 100%;
            background-color: #2e86ff;
            color: #fff;
          }
        }
        .phoneTrueBox{
          width: 50%;
          margin: auto;
          p{
            i.name{
              display: inline-block;
              min-width: 14%;
              text-align: center;
              font-style: normal;
              margin: 10px 0;
            }
            .el-input{
              width: 50%;
              margin-right: 2%;
            }
            .el-button{
              width: 34%;
              background-color: #f4f4f4;
              border: 1px solid #ddd;
              color: #666;
            }
          }
          p.smsCodeVerify{
            height: 18px;
            margin-top: 2px;
            margin-left: 15%;
            span{
              color: #f00;
            }
          }
          .btn{
            padding-top: 20px;
            .el-button{
              width: 100%;
              background-color: #2f8efa;
              color: #fff;
            }
          }
          a{
            display: block;
            text-align: right;
            color: #2f8efa;
            margin-top: 10px;
          }
        }
        .phoneFalseBox{
          width: 50%;
          margin: auto;
          i.name{
            display: inline-block;
            min-width: 14%;
            text-align: center;
            font-style: normal;
            margin: 10px 0;
          }
          p{
            span.toRelate{
              color: #000;
              font-size: 1rem;
              font-weight: bold;
              display: block;
              text-align: center;
              padding: 10px 0;
            }
          }
          .btn{
            .el-button{
              width: 100%;
              background-color: #2f8efa;
              color: #fff;
              margin-top: 30px;
            }
          }
        }
        .resetPwdBox{
          .newPwd,.newPwdReset{
            width: 50%;
            margin: 20px auto;
            i.name{
              width: 26%;
              display: inline-block;
              text-align: center;
              font-style: normal;
            }
            .el-input{
              width: 74%;
            }
            p{
              padding: 2px 0;
              height: 18px;
              span{
                display: inline-block;
                margin-left: 27%;
                color: #f00;
              }
            }
          }
          .btn{
            width: 50%;
            margin: auto;
            .el-button{
              width: 100%;
              background-color: #2f8efa;
              color: #fff;
            }
          }
        }
      }
    }
  }
</style>